// DOM元素引用
let chatMessages, userInput, sendButton;

// 存储当前的 AbortController
let currentAbortController = null;

// 初始化函数
function init() {
    // 获取DOM元素
    chatMessages = document.getElementById('chat-messages');
    userInput = document.getElementById('user-input');
    sendButton = document.getElementById('send-button');
    
    // 检查必要元素是否存在
    if (!chatMessages || !userInput || !sendButton) {
        console.error('无法找到必要的DOM元素');
        return;
    }
    
    // 绑定事件监听器
    sendButton.addEventListener('click', handleSendClick);
    userInput.addEventListener('keypress', handleKeyPress);
}

// 禁用输入框并更换图标
function disableInput() {
    if (userInput) {
        userInput.disabled = true;
        userInput.style.opacity = '0.5';
        userInput.placeholder = '请等待瑠璃思考完成...(>▽<)';
    }
    if (sendButton) {
        const sendIcon = sendButton.querySelector('img');
        if (sendIcon) {
            sendIcon.src = 'lock.svg';
        }
        sendButton.disabled = false; // 保持可点击以支持停止功能
        sendButton.style.cursor = 'pointer';
        sendButton.title = '停止回答';
    }
}

// 启用输入框并恢复图标
function enableInput() {
    if (userInput) {
        userInput.disabled = false;
        userInput.style.opacity = '1';
        userInput.placeholder = '与瑠璃聊天...(≧∇≦)ﾉ';
        userInput.focus();
    }
    if (sendButton) {
        const sendIcon = sendButton.querySelector('img');
        if (sendIcon) {
            sendIcon.src = 'tele.svg';
        }
        sendButton.disabled = false;
        sendButton.style.cursor = 'default';
        sendButton.title = '';
    }
    
    // 清除 AbortController
    currentAbortController = null;
}

// 发送按钮点击处理
function handleSendClick(e) {
    e.preventDefault();
    
    // 如果正在等待回复，则停止当前请求
    if (currentAbortController) {
        stopCurrentRequest();
        return;
    }
    
    sendMessage();
}

// 输入框回车处理
function handleKeyPress(e) {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendMessage();
    }
}

// 添加消息到聊天界面
function addMessage(content, sender) {
    const messageDiv = document.createElement('div');
    messageDiv.className = `message-bubble ${sender}`;
    
    if (sender === 'user') {
        messageDiv.textContent = content;
    } else {
        // 处理AI消息中的换行符
        // 将单个换行符替换为<br>，但保留连续换行符的处理
        messageDiv.innerHTML = content.replace(/\n/g, '<br>');
    }
    
    chatMessages.appendChild(messageDiv);
    chatMessages.scrollTop = chatMessages.scrollHeight;
    
    // 处理数学公式渲染
    if (sender === 'ai' && (content.includes('$') || content.includes('\\(') || content.includes('\\['))) {
        // 确保 MathJax 已加载
        if (typeof MathJax !== 'undefined') {
            MathJax.typesetPromise([messageDiv]).catch(err => {
                console.error('MathJax渲染错误:', err);
            });
        } else {
            console.warn('MathJax 未加载，无法渲染数学公式');
        }
    }
    
    return messageDiv; // 返回创建的消息元素
}

// 添加支持段落分隔的消息到聊天界面
function addMessageWithParagraphs(content, sender) {
    // 按连续换行符分割内容
    const paragraphs = content.split('\n\n');
    
    // 处理第一个段落（立即显示）
    if (paragraphs.length > 0 && paragraphs[0].trim() !== '') {
        addMessage(paragraphs[0], sender);
    }
    
    // 为后续每个段落创建新的气泡（延迟显示）
    for (let i = 1; i < paragraphs.length; i++) {
        if (paragraphs[i].trim() !== '') {
            // 使用闭包保存当前段落的索引
            (function(index) {
                setTimeout(() => {
                    addMessage(paragraphs[index], sender);
                }, 666 * index); // 每个气泡间隔666毫秒显示
            })(i);
        }
    }
}

// 显示加载状态
function showLoading(delay = 666) {
    setTimeout(() => {
        const loadingDiv = document.createElement('div');
        loadingDiv.className = 'message-bubble ai loading-indicator';
        loadingDiv.id = 'loading-bubble';
        loadingDiv.innerHTML = '<span></span><span></span><span></span>';
        
        // 只有在 chatMessages 元素存在时才添加加载指示器
        if (chatMessages) {
            chatMessages.appendChild(loadingDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }
    }, delay);
}

// 隐藏加载状态
function hideLoading() {
    const loadingBubble = document.getElementById('loading-bubble');
    if (loadingBubble) {
        loadingBubble.remove();
    }
}

// 停止当前请求
function stopCurrentRequest() {
    if (currentAbortController) {
        currentAbortController.abort();
        currentAbortController = null;
    }
    
    hideLoading();
    addMessage('瑠璃的回答被中断了...下次再聊吧！(｡•́︿•̀｡)', 'ai');
    enableInput();
}

// 发送消息函数
async function sendMessage() {
    const message = userInput.value.trim();
    if (!message) return;
    
    // 添加用户消息
    addMessage(message, 'user');
    userInput.value = '';
    
    // 禁用输入框并更换图标
    disableInput();
    
    // 特殊处理 clean 命令
    if (message.toLowerCase() === 'clean') {
        try {
            const response = await fetch('/clean', {
                method: 'POST'
            });
            
            if (response.ok) {
                setTimeout(() => {
                    addMessage('哼，才不是失忆呢，只是...把那些不愉快，暂时封印起来了而已！💢', 'amnesia');
                }, 666); // 延迟666毫秒显示
            } else {
                addMessage('失忆失败，请稍后重试。', 'ai');
            }
        } catch (error) {
            console.error(error);
            addMessage('失忆失败，请稍后重试。', 'ai');
        } finally {
            enableInput(); // 恢复输入状态
        }
        return; // 处理完 clean 命令后直接返回
    }
    
    // 显示加载状态 (默认延迟2秒)
    showLoading();
    
    // 创建新的 AbortController
    currentAbortController = new AbortController();
    
    try {
        // 发送到服务器
        const response = await fetch('/chat', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ message: message }),
            signal: currentAbortController.signal
        });
        
        // 检查请求是否被中止
        if (currentAbortController?.signal.aborted) {
            return;
        }
        
        if (!response.ok) {
            throw new Error('网络错误');
        }
        
        const data = await response.json();
        
        // 再次检查请求是否被中止
        if (currentAbortController?.signal.aborted) {
            return;
        }
        
        hideLoading();
        addMessageWithParagraphs(data.response, 'ai');
        
    } catch (error) {
        // 如果是主动中止的错误，不显示错误信息
        if (error.name === 'AbortError') {
            return;
        }
        
        console.error('发送失败:', error);
        hideLoading();
        addMessage('抱歉，发送失败，请重试', 'ai');
    } finally {
        enableInput(); // 恢复输入状态
    }
}

// 计算并设置输入区域宽度
function setInputAreaWidth() {
    const chatInputArea = document.querySelector('.chat-input-area');
    if (!chatInputArea) return;
    
    const screenHeight = window.innerHeight;
    const screenWidth = window.innerWidth;
    const shorterDimension = Math.min(screenHeight, screenWidth);
    const targetWidth = shorterDimension * 0.88;
    
    chatInputArea.style.width = `${targetWidth}px`;
    chatInputArea.style.maxWidth = '100%';
    chatInputArea.style.left = '50%';
    chatInputArea.style.transform = 'translateX(-50%)';
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
    init();
    setInputAreaWidth();
});

// 监听窗口大小变化
window.addEventListener('resize', () => {
    setInputAreaWidth();
    // 确保在视窗大小变化（例如键盘弹出/收起）后，聊天视图能滚动到底部
    if (chatMessages) {
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }
});